<template>
	<view class="content">
		<uni-list-item title="设备名称" :rightText="paramsdetail.deviceName "></uni-list-item>
		<uni-list-item title="设备IMEI" :rightText="paramsdetail.deviceId"></uni-list-item>

		<uni-list-item title="报警探测器" :rightText="paramsdetail.slaveName"></uni-list-item>

		<uni-list-item title="报警类型">

			<template v-slot:footer>
				<text class="text-sm text-red">{{levelDes()}}</text>
			</template>
		</uni-list-item>
		<uni-list-item title="浓度" :rightText="dataDes(paramsdetail)"></uni-list-item>
		<uni-list-item title="建筑物" :rightText="paramsdetail.buildingName"></uni-list-item>
		<uni-list-item title="建筑地址" :rightText="paramsdetail.address" />

		<uni-list-item title="处理状态" :rightText="handleStaticDes(handleDetail.handleStatic)"/>

		<uni-list-item title="处理描述" v-if="handled">
			<template v-slot:footer>
				<view style="width: 400rpx;" class="flexrowcenter justify-end">
					<text class="text-sm text-gray text-right">{{ handleDetail.remark }}</text>
				</view>
			</template>
		</uni-list-item>
		<uni-list-item title="处理照片" v-if="handled">
			<template v-slot:footer>
				<view style="width: 400rpx;" class="flexrowflexend">
					<upload v-model="handleDetail.handleImg" :isResponse="false" :maxCount="0" :deletable="false"></upload>
				</view>
			</template>
		</uni-list-item>
		<uni-list-item title="处理时间" :rightText="dayjs(handleDetail.handleTime).format('YYYY-MM-DD HH:mm:ss')" v-if="handled"></uni-list-item>
		<uni-list-item title="处理人" :rightText="handleDetail.handleUserName" v-if="handled"></uni-list-item>
		<uni-popup ref="popup" type="bottom" v-if="handled">
			<uni-list border-full>
				<uni-list-item v-if="handleDetail.firstResponderDO" :title="handleDetail.firstResponderDO.name" note="一级接警人">
					<template v-slot:footer>
						<view class="flexrowcenter" @click="callphone(handleDetail.firstResponderDO.phone)">
							<text class="text-sm font-blue-color">{{ handleDetail.firstResponderDO.phone }}</text>
							<image class="icon-small" mode="aspectFit" src="@/static/images/common/phone-call.png"
								style="margin-left: 10rpx;"></image>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item v-if="handleDetail.secondResponderDO" :title="handleDetail.secondResponderDO.name" note="二级接警人">
					<template v-slot:footer>
						<view class="flexrowcenter" @click="callphone(handleDetail.secondResponderDO.phone)">
							<text class="text-sm font-blue-color">{{handleDetail.secondResponderDO.phone}}</text>
							<image class="icon-small" mode="aspectFit" src="@/static/images/common/phone-call.png"
								style="margin-left: 10rpx;"></image>
						</view>
					</template>
				</uni-list-item>

				<uni-list-item v-if="handleDetail.thirdResponderDO" :title="handleDetail.thirdResponderDO.name" note="三级接警人">
					<template v-slot:footer>
						<view class="flexrowcenter" @click="callphone(handleDetail.thirdResponderDO.phone)">
							<text class="text-sm font-blue-color">{{handleDetail.thirdResponderDO.phone}}</text>
							<image class="icon-small" mode="aspectFit" src="@/static/images/common/phone-call.png"
								style="margin-left: 10rpx;"></image>
						</view>
					</template>
				</uni-list-item>

				<uni-list-item v-if="handleDetail.fourthResponderDO" :title="handleDetail.fourthResponderDO.name" note="四级接警人">
					<template v-slot:footer>
						<view class="flexrowcenter" @click="callphone(handleDetail.fourthResponderDO.phone)">
							<text class="text-sm font-blue-color">{{handleDetail.fourthResponderDO.phone}}</text>
							<image class="icon-small" mode="aspectFit" src="@/static/images/common/phone-call.png"
								style="margin-left: 10rpx;"></image>
						</view>
					</template>
				</uni-list-item>

			</uni-list>
		</uni-popup>
		<view class="button-container" v-if="!handled">
			<button type="primary" class="button" @tap="actionSheetTap">开始处理</button>
		</view>
		<view style="height:100rpx" />
	</view>
</template>
<script>
	import dayjs from "dayjs";
	import {
		getHandleDetail,
		handleGet
	} from "@/api/police/index"
	export default {
		data() {
			return {
				dayjs: dayjs,
				deviceId: '',
				handled:  false,
        		paramsdetail:{},
				data: {},
				images: [],
        		dictMap : this.$store.state.dict.dictMap,
				handleDetail: {}
			}
		},
		filter: {

		},
		onLoad(query) {
			const {
				data
			} = query || {}
      this.paramsdetail = JSON.parse(data);
      console.log('paramsdetail>>>', this.paramsdetail )
     const deviceId = this.paramsdetail.deviceId
      const handleStatic = this.paramsdetail.handleStatic
      this.deviceId = deviceId
      this.handled = handleStatic !== 2
	  if(this.handled) {
		handleGet({
				id: this.paramsdetail.id
			}).then(({data}) => {
				this.handleDetail = data
				// handleStatic
			})
	  }
		},
		methods: {
      levelDes(){
        let level = this.paramsdetail.level
        let label = ''
        const alarm_type =   this.dictMap?.alarm_type || []
        alarm_type.map(item=>{
          if(item.value == level){
            label = item.label
          }
        })
        return label
      },
      dataDes(value) {
        const data = value.data
        const propertyUnit= value.propertyUnit
        return data + propertyUnit
      },
			handleStaticDes(value) {
				let des = ''
				if (value === 1) {
					des = '已解决'
				} else {
					des = '未解决'
				}
				return des

			},
			callphone(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile //仅为示例
				});
			},
			actionSheetTap() {
				uni.navigateTo({
					url: `/pages/police/police-deal/police-deal?data=` + encodeURIComponent(JSON.stringify(this.paramsdetail))
				})
				console.log('%c [ this.paramsdetail ]-161', 'font-size:13px; background:#41174b; color:#855b8f;', this.paramsdetail)
				uni.$once('refresh-handle-create', ()=>{
					handleGet({
						id: this.paramsdetail.id
					}).then(({data}) => {
						this.handled = data.handleStatic !== 2
						this.handleDetail = data
					})
				})
			}
		}
	}
</script>

<style>
	.content {
		height: 100%;

		padding-bottom: calc(var(--window-bottom) + 20px);

	}

	.image {
		width: 50px;
		background-color: red;
		height: 50px;
		margin-left: 10px;


	}

	.button-container {
		margin-top: 100rpx;
		display: flex;
		height: 50px;
	}

	.button {
		flex: 1;
		margin-right: 10px;
		margin-left: 10px;
		height: 100%;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		border-radius: 5px;
		color: #fff;
	}

	.icon-small {
		height: 20px;
		width: 20px;
	}

	.font-blue-color {
		color: #266ef6
	}
</style>